<template>
	<el-container>
		<!-- <el-aside>
			<a-left :data="ldata" @callOut="onCall"></a-left>
		</el-aside> -->
		<el-main>
			<d-box ref="rePop" :title="wtit">
				<div class="pop_content">
					<div class="airJK">
						<div class="jk_l" v-show="!isJk" :class="{ 'isDev': !isJk }">
						</div>
						<div class="jk_l" v-show="isJk">
							<div class="">
								<span style="color: #eee;">
									设备清单
								</span>
								<div class="ck all" @click="jkAll = !jkAll" :class="{ 'act': jkAll }">
									全选
								</div>
							</div>
							<div class="search-bar" style="margin: 20px 0 10px">
								<input type="text" v-model="insearch" placeholder="请输入关键字" />
								<button></button>
							</div>
							<div class="dlst">
								<div class="ck" v-for="i in jk.list" @click="setSel(i)"
									:class="{ 'act': datSel.indexOf(i) > -1 }">
									{{ i.devname }}
								</div>
							</div>
						</div>
						<div class="br">
						</div>
						<div class="jk_r">
							<div class="" v-for="jk in jkMenu">
								<span>
									{{ jk.name }}
								</span>
								<el-dropdown class="dropd" @command="t => handleCommand(jk, t)">
									<span class="el-dropdown-link">
										<span class="spname">{{ jk.act }}</span>
										<span class="el-icon--right" v-show="jk.child">▼</span>
									</span>
									<template #dropdown>
										<el-dropdown-menu>
											<el-dropdown-item v-for="s in jk.child"
												:command="s">{{ s }}</el-dropdown-item>
										</el-dropdown-menu>
									</template>
								</el-dropdown>
							</div>
						</div>
					</div>
				</div>
			</d-box>
		</el-main>
		<el-aside>
			<a-right :data="rdata" @call="onCall"></a-right>
		</el-aside>
	</el-container>
</template>

<script setup>
import {
	computed,
	watch,
	ref,
	onUnmounted,
	onMounted,
	nextTick,
	toRefs,
} from "vue";

import {
	useStore
} from "vuex";
import aLeft from "./left.vue"
import aRight from "./right.vue"
import hkPlay from "cmpt/hk/play-Pop.vue";
import dBox from "cmpt/drag-box.vue";
const store = useStore();
const {
	asideWidth,
	menuItem2,
	year,
	arrAir,
	spaceComd
} = toRefs(store.state);
const emits = defineEmits(["call"]);
const hCallOut = (h, d) => {
	emits("call", h, d);
}
//空间,年份切换 
watch([year, spaceComd], o => {
	refData(o[1], o[0]);
	//refData(spaceComd.value, y)
});

function jkM(n, c, act) {
	return {
		name: n,
		child: c,
		act: act || "",
	}
}

const rdata = ref({}),
	ldata = ref({}),
	rePop = ref(null),
	isJk = ref(false),
	wtit = ref(""),
	jkMenu = ref([
		jkM("运行状态", ["运行", "停止"]),
		jkM("设置温度", ["26", "27"]),
		jkM("运行模式", ["制热", "制冷", "自动"]),
		jkM("当前风速", ["一档", "二档"]),
		jkM("环境温度", ["10", "16"])
	]),
	datSel = ref([]),
	jk = ref({
		list: []
	}),
	jkAll = ref(false);

//设备集控 或 单个设备 的 参数
const handleCommand = (par, i) => {
	par.act = i;

};

//集控 或 单个设备
watch(isJk, e => {
	if (e) {
		jkMenu.value = jkMenu.value.slice(0, 4);
	} else {
		//单个设备
		jkMenu.value[4] = jk("环境温度", ["10", "16"]);
	}
});

//集控全选
watch(jkAll, a => {
	if (a) {
		for (var i = 0; i < 10; i++) {
			datSel.value.push(i);
		}
	} else {
		datSel.value = [];
	}
});

//集控设置选择 jkAll
const setSel = ix => {
	if (ix) {
		let arr = [...datSel.value];
		let i = arr.indexOf(ix);
		if (i > -1) {
			datSel.value.splice(i, 1);
		} else {
			datSel.value.push(ix);
		}
	}
}
const setItemCmd = i => {
	if (i) {
		wtit.value = i;
		isJk.value = true;
		rePop.value.show();
		rePop.value.closeWait();
	} else {
		//rePop.value.hide();
	}
	console.log("下级子菜单切换", i);
}
const onCall = (h, d) => {
	switch (h) {
		case "hAirInfo_XXX":
			//已在home 显示 
			isJk.value = false;
			wtit.value = d.devlocal;
			rePop.value.show();
			break;
		case "onAir":
			break;

		case "hGetAirSet":
			cc = d;

			refTprt();
			break;
		case "hMonthChangeTj":
			_mm = d;
			hSetSd();
			break;
		default:
			hCallOut(h, d);
			break;
	}
	//console.log(h, d);
}
let _mm = new Date().getMonth() + 1;
let cc = '222'; //默认制冷
const refTprt = () => {
}

const hSetSd = () => {
	//*空调运行时点分布
	let pid = spaceComd.value.id,
		y = year.value || new Date().getFullYear(),
		m = _mm;

	rdata.value.barList = {
		list: []
	};
}
//空调集控,搜索
const insearch = ref("");


var hw = -1;
const refData = (sp, y) => {
	let spId = sp.id;
	if (!spId) {
		return;
	}
	clearTimeout(hw);
	hw = setTimeout(() => {
		rdata.value.jk = arrAir.value;
		jk.value = arrAir.value;
		hSetSd();

	}, 100);
}

const call = (h, d) => {
	switch (h) {
		case "OnClickDbL":
			break;
		default:
			break;
	}
	console.log("from parent evnet", h, d);
}
defineExpose({
	call
})
const hRefIndexDat = () => {
	refData(spaceComd.value);
};

onMounted(() =>
	nextTick(() => {
		setTimeout(() => {
			hRefIndexDat();
		}, 50);
	})
);
</script>

<style scoped lang="scss">
div[class^="screenNum"] {
	background-size: auto 80%;
	width: 100%;
	height: 50%;
	background-repeat: no-repeat;
	background-position: center;
}

.search-bar {
	display: flex;
	align-items: center;
	width: 170px;
	height: 28px;
	margin-bottom: 10px;
	border-radius: 1px;
	box-shadow: 0 0 2px 2px #3397c2, inset 0 0 3px 0px #3397c2;

	input {
		width: calc(100% - 30px);
		height: 100%;
		background: none;
		color: #eee;
		text-indent: 10px;
	}

	button {
		width: 30px;
		height: 100%;
		border: 0;
		background: none;
		background-image: url("/imgs/search.png");
		background-size: 80% 80%;
		background-repeat: no-repeat;
		background-position: center;
		cursor: pointer;
	}
}

.airJK {
	display: flex;
	margin-right: 30px;

	color: #A7B4C6;

	.br {
		height: auto;
		width: 2px;
		background: linear-gradient(0deg, transparent, #58b5e3 50%, transparent);
		margin: 0 14px;
	}

	.jk_l.isDev {
		display: flex;
		align-items: center;
	}

	.jk_l {

		>div {
			display: flex;
			justify-content: space-between;
		}

		.dlst {
			display: flex;
			flex-direction: column;
			flex-wrap: nowrap;
			align-items: flex-start;
			max-height: 200px;
			overflow-y: auto;

			>div {
				margin: 4px 0;
				width: 100%;
				cursor: pointer;

			}
		}

		.ck {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
		}

		.ck:hover {
			box-shadow: 0 0 2px 0 #3397c2;
		}

		.ck.act::before {
			content: '✔';
		}

		.ck::before {
			content: '';
			color: #3397c2;
			font-size: 14px;
			text-align: center;
			display: inline-block;
			line-height: 14px;
			width: 14px;
			height: 14px;
			margin: 0 6px 0 3px;
			padding: 0;
			box-shadow: 0 0 3px 3px #3397c2, inset 0 0 3px 0px #3397c2;
			border-radius: 1px;
		}
	}

	.jk_r {
		margin-left: 20px;

		>div {
			margin: 14px 0;
		}

		>div>* {
			line-height: 20px;
		}
	}

	.dropd {
		box-shadow: 0 0 3px 3px #3397c2, inset 0 0 4px 1px #3397c2;
		border-radius: 2px;
		padding: 0px 8px;
		font-size: 12px;
		margin-left: 10px;

		.el-dropdown-link {
			color: #A7B4C6;
			width: 70px;
			display: flex;
			justify-content: space-between;
		}
	}

	.dropd::after {
		position: absolute;
		content: "";
		display: inline-block;
		width: 18px;
		height: 18px;
		background: url(/imgs/hos/set.png);
		background-size: 100% 100%;
		right: -25px;
		margin-top: 1px;
	}
}
</style>